<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>模板</title>
    <link rel="icon" href="../img/logo.png" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="../bootstrap-4.6.2-dist_and_jQuery/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../bootstrap-4.6.2-dist_and_jQuery/css/style.css">
    <script src="../bootstrap-4.6.2-dist_and_jQuery/js/jquery-3.7.0.js"></script>
    <script src="../bootstrap-4.6.2-dist_and_jQuery/js/bootstrap.js"></script>
</head>
<body>
    <div class="header">
        <div style="display: flex; align-items: center; margin-right: auto;">
            <img src="../img/logo2.png" alt="图片加载失败">
            <h2>教务管理系统</h2>
        </div>  
        
        <div class="option">
            <a href="学生首页.html" class="daohang">学生选课</a>
        </div>
        <div class="option">
            <a href="学生成绩查询.html" class="daohang">成绩查询</a>
        </div>
        <div class="option">
            <a href="学生申请缓考.html" class="daohang">申请缓考</a>
        </div>
    </div>
    <div class="container">
        <form id="huankao">
            <div class="form-group row">
              <label for="name" class="col-sm-2 col-form-label">姓名：</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="name" name="name" required>
              </div>
            </div>
            <div class="form-group row">
              <label for="student_id" class="col-sm-2 col-form-label">学生编号：</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="student_id" name="student_id" required>
              </div>
            </div>
            <div class="form-group row">
              <label for="contact" class="col-sm-2 col-form-label">联系方式：</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="contact" name="contact" required>
              </div>
            </div>
            <div class="form-group row">
              <label for="class" class="col-sm-2 col-form-label">所在班级：</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="class1" name="class1" required>
              </div>
            </div>
            <div class="form-group row">
              <label for="reason" class="col-sm-2 col-form-label">申请理由：</label>
              <div class="col-sm-10">
                <textarea class="form-control" id="reason" name="reason" required></textarea>
              </div>
            </div>
            <div class="form-group row">
              <label for="attachments" class="col-sm-2 col-form-label">证明材料：</label>
              <div class="col-sm-10">
                <input type="file" class="form-control-file" id="attachments" name="attachments" accept=".pdf,.doc,.docx" required>
              </div>
            </div>
            <div class="form-group row">
              <label for="deadline" class="col-sm-2 col-form-label">申请期限：</label>
              <div class="col-sm-10">
                <input type="date" class="form-control" id="deadline" name="deadline" required>
              </div>
            </div>
            <div class="form-group row">
              <label for="additional_comments" class="col-sm-2 col-form-label">补充说明：</label>
              <div class="col-sm-10">
                <textarea class="form-control" id="additional_comments" name="additional_comments"></textarea>
              </div>
            </div>
      
            <div class="form-group row">
              <div class="col-sm-10 offset-sm-2">
                <button type="submit" class="btn btn-primary">提交申请</button>
              </div>
            </div>
          </form>
    </div>
    <div class="footer">
        教务管理系统 2023 from 摆烂小组
    </div>
    <!-- 提示信息 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">提示消息</h5>
            </div>
            <div class="modal-body">
                <b id="message">这是提示信息</b>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
            </div>
            </div>
        </div>
    </div>
    <script>//显示提示信息
        function showmessage(message){
            $('#message').text(message)
            $('#exampleModal').modal('show');
        }
    </script>
    <script>
        $(function(){
            // 通过表单的 id 或 class 选择器选取表单元素
            var form = $('#huankao');

            // 监听表单的提交事件
            form.submit(function(event) {
                event.preventDefault(); // 阻止表单的默认提交行为

                // 执行表单提交的自定义逻辑
                // 可以使用 jQuery 方法获取表单字段的值
                var name = $('#name-input').val();
                var student_id = $('#email-input').val();
                var contact = $('#contact').val();
                var class1 = $('#class1').val();
                var reason = $('#reason').val();
                var contact = $('#contact').val();
                var attachments = $('#attachments').val();
                var deadline = $('#deadline').val();
                var additional_comments = $('#additional_comments').val();

                // 其他字段的获取

                // 可以执行异步操作，如向服务器发送表单数据
                $.ajax({
                url: 'submit-form.php', // 替换为实际的服务器端处理程序的 URL
                method: 'POST',
                data: form.serialize(), // 将表单数据序列化为字符串
                success: function(response) {
                    // 处理成功响应
                    showmessage("提交申请成功");
                    // 可以执行其他操作，如重定向或清空表单等
                },
                error: function(xhr, status, error) {
                    // 处理错误响应
                    showmessage("提交申请失败")
                }
                });
            });
        });
            
        var allCookies = parseCookies();


        function parseCookies() {
            var cookies = {};
            var cookieString = document.cookie;
            var cookieArray = cookieString.split('; ');

            for (var i = 0; i < cookieArray.length; i++) {
                var cookie = cookieArray[i].split('=');
                var name = cookie[0];
                var value = cookie[1];
                cookies[name] = value;
            }

            return cookies;
        }
    </script>
</body>    
</html>